<template>
  <el-container>
    <el-main>
      <div class="course-content">
        <div class="courer-operation">
          <div class="operation-left">
            <el-button type="danger">批量删除</el-button>
            <el-button type="primary" @click="$router.push({ path: '/createcode' })">添加</el-button>
            <el-button type="primary" @click="$router.push({ path: '/order/code-import' })">批量导入</el-button>
            <el-button type="primary" @click="$router.push({ path: '/createmulticode' })">批量生成</el-button>
          </div>
          <div class="operation-right">
            <div class="key-ipt">
              <el-input v-model="form.key" placeholder="优惠码" style="margin-right: 10px"></el-input>
              <el-input v-model="form.user_id" placeholder="学员ID"></el-input>
            </div>
            <div class="btn">
              <el-button @click="clear">清空</el-button>
              <el-button type="primary" @click="choose">筛选</el-button>
            </div>
            <div class="more" @click="drawer = true" v-if="this.form.key || this.form.user_id || show">
              <img src="@/assets/img/icon-filter-h.png" alt="">
              <span style="color: #3ca7fa">已选</span>
            </div>
            <div class="more" @click="drawer = true" v-else>
              <img src="@/assets/img/icon-filter.png" alt="">
              <span>更多</span>
            </div>
          </div>
        </div>
        <div class="course-table" id="course">
          <el-table :data="promocodeData.data" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" min-width="71"></el-table-column>
            <el-table-column label="优惠码" min-width="160">
              <template slot-scope="scope">
                <div style="display: block;">{{ scope.row.code }}</div>
                <div>
                  <p>面值：{{ scope.row.invited_user_reward }}元</p>
                  <p>奖励：{{ scope.row.invite_user_reward }}元</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="可使用次数" min-width="134">
              <template slot-scope="scope">
                <div v-if="scope.row.use_times === 0" style="display: inline-block;padding: 6px 8px;background-color: #fef0f0;color: #f56c6c;">不限制</div>
                <div v-else style="display: inline-block;padding: 6px 8px;background-color: #f4f4f5;color: #909399;">{{ scope.row.use_times }}次</div>
              </template>
            </el-table-column>
            <el-table-column prop="used_times" label="已使用次数" min-width="89">
              <template slot-scope="scope">{{ scope.row.used_times }}次</template>
            </el-table-column>
            <el-table-column label="过期时间" min-width="156">
              <template slot-scope="scope">
                <span>{{ scope.row.expired_at ? scope.row.expired_at.substring(0, scope.row.expired_at.lastIndexOf(":")) : '' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="添加时间" miin-width="89">
              <template slot-scope="scope">
                <span>{{ new Date(scope.row.created_at).toLocaleString().substring(0, scope.row.created_at.lastIndexOf(":")-1) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="promocodeData.current_page" :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper" :total="promocodeData.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { promocode } from "@/network/operate";

export default {
  data() {
    return {
      params: {
        page: 1,
        size: 10
      },
      form: {
        key: '',
        user_id: ''
      },
      show: false,
      promocodeData: {},
    }
  },
  methods: {
    async getPromocode() {
      const { data } = await promocode(this.params)
      this.promocodeData = data
    },
    handleSizeChange(size) {
      this.params.size = size
      this.getPromocode()
    },
    handleCurrentChange(page) {
      this.params.page = page
      this.getPromocode()
    },
    choose() {
      this.params.page = 1
      this.params = {...this.params, ...this.form}
      this.getPromocode()
    },
    clear() {
      delete this.params.key
      delete this.params.user_id
      this.getPromocode()
    }
  },
  created() {
    this.getPromocode()
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
  text-align: center;
}

.el-main {
  background-color: #f1f2f9;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;

  .course-content {
    width: 100%;
    height: auto;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
  }

  .courer-operation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;

    .operation-left {
      display: flex;
      align-items: center;

      .options-link {
        display: inline-block;
        vertical-align: middle;
        width: auto;
        height: 30px;
        box-sizing: border-box;
        padding: 0 0 0 20px;
        border-left: 1px solid #d8d8d8;
        margin-left: 30px;

        .link {
          width: 100%;
          height: 100%;
          cursor: pointer;
          font-size: 16px;
          font-weight: 400;
          color: #606266;
          display: flex;
          flex-direction: row;
          align-items: center;

          img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
          }
        }
      }
    }

    .operation-right {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;

      .key-ipt {
        margin-right: 10px;
        height: 40px;

        .el-input {
          width: 150px;
        }
      }

      // .btn {
      //   .el-button {
      //   }
      // }

      .more {
        height: 14px;
        font-size: 14px;
        font-weight: 400;
        color: #666;
        line-height: 14px;
        margin-left: 10px;
        cursor: pointer;

        img {
          width: 14px;
          height: 14px;
          margin-right: 5px;
        }

        // span {
        // }
      }
    }
  }

  ::v-deep .course-table {

    // 表格内容深度设置
    .el-table th {
      line-height: 0;
      background: rgb(241, 242, 249) !important;
      color: #333;
    }

    .el-table th:last-of-type>.cell {
      justify-content: flex-end;
    }

    .el-table .cell {
      color: #333;
    }

    .el-table td:last-child .cell {
      justify-content: flex-end !important;
    }

    .title {
      margin-left: 10px;
      max-width: 340px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .member {
      margin-left: 5px;
      margin-right: 5px;
    }

    // 下拉菜单的样式
    .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }
  }

  // 分页
  .pagination {
    margin-top: 30px;
  }
}

div.el-dialog__wrapper {
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
}

::v-deep .el-drawer {
  width: 360px !important;
}

::v-deep .el-drawer__header {
  margin: 0;
  padding: 0;
}

.choose {
  width: 100%;
  height: auto;
  float: left;
  padding: 30px;

  .title {
    width: 100%;
    height: 16px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 16px;
    margin-bottom: 30px;
    display: flex;
  }

  .content {
    .el-select {
      width: 100%;
      margin: 20px 0;
    }

    .btn {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
    }
  }
}
</style>